{extend name='layout:app'}

{block name='css'}
<link rel="stylesheet" href="__STATIC__/css/dropload.css">
<script src="__STATIC__/js/dropload.js"></script>
<link rel="stylesheet" href="__STATIC__/css/wallet.css">
{/block}

{block name='content'}
    <div id="app">
        <div class="nav">
            <i class="el-icon-arrow-left icon_left" @click="back"></i>
            <div>钱包</div>
            <i class="iconfont icon-home icon_right" @click="home"></i>
        </div>
        <div class="wallet">
            <div class="info">
                <div class="title">我的余额</div>
                <div class="remain">¥<span>{$info.memb_balance}</span></div>
            </div>
            <div class="wallet-bot">
                <div class="option">
                    <i class="iconfont icon-zhangdan"></i>
                    <span>我的账单</span>
                </div>
                <div class="option">
                    <a href="/index/services/editmoney">
                        <i class="iconfont icon-chongzhi"></i>
                        <span>立即充值</span>
                    </a>
                </div>
                {/*
                {if($info.memb_is_truth == 1)}
                <div class="option">
                    <a href="/index/services/editmoney/forwhat/1">
                        <i class="iconfont icon-i-money"></i>
                        <span>申请提现</span>
                    </a>
                </div>
                {/if}
                */ }
            </div>
        </div>
        <div class="bind">
            <div class="title">绑定手机号</div>
            <div class="phone-info">
                <i class="iconfont icon-phone"></i>
                <span>{$Think.session.user.phone|substr=0,3}****{$Think.session.user.phone|substr=-4,4}</span>
            </div>
        </div>

        <div class="details" v-cloak>
            <div class="bill-cont">
                <div class="item" v-for="details in detailsList">
                    <div class="icon"><i class="iconfont icon-i-money"></i></div>
                    <div class="info">
                        <div class="name">{{details.operate}}</div>
                        <div class="time">{{details.create_time}}</div> <!--:class="moneyColor(details.money)? 'money-default': 'money-red'"-->
                        <div class="money"  ref="detailsColor">{{details.value}}</div>
                    </div>
                </div>
            </div>
        </div>

    </div>
{/block}
{block name='footer'}{/block}
{block name='js'}
<script>
    var page = -1
    var size = 0
    var that;

    new Vue({
        el:'#app',
        data: {
            detailsList: []
        },
        created() {
            that = this
            this.$nextTick(() => {
                // dropload
                $('.details').dropload({
                    scrollArea : window,
                    threshold : 50,//提前加载距离
                    // autoLoad: true,
                    domUp: [],
                    loadDownFn : function(me){
                        page++;
                        $.ajax({
                            type: 'GET',
                            url: '/index/index/getBill?page='+page,
                            dataType: 'json',
                            success: function(data){
                                var arrLen = data.length;
                                if(arrLen) {
                                    for(v of data) {
                                        that.detailsList.push({
                                            operate: v.operate,
                                            create_time: v.create_time,
                                            value: v.value
                                        })
                                    }
                                    setTimeout(() => {
                                        $('.money').each(function (i,v) {
                                            if(v.innerText.substr(0,1) === '-') {
                                                $(v).addClass('money-default')
                                            }else {
                                                $(v).addClass('money-red')
                                            }
                                        })
                                    },300)
                                    if(arrLen < 10) {
                                        me.lock();
                                        me.noData();
                                        me.resetload();
                                        return false
                                    }
                                }else{  // 如果没有数据
                                    // 锁定
                                    me.lock();
                                    // 无数据
                                    me.noData();
                                }
                                // 为了测试，延迟1秒加载
                                /*setTimeout(function(){
                                    // 插入数据到页面，放到最后面
                                    // $('.lists').append(result);
                                    // 每次数据插入，必须重置
                                    // me.resetload();
                                },1000);*/
                                me.resetload();
                            },
                            error: function(xhr, type){
                                alert('Ajax error!');
                                // 即使加载出错，也得重置
                                me.resetload();
                            }
                        });
                    }
                });
            })
        },
        methods: {
            back() {
                window.history.go(-1)
            },
            home() {
                location.href = '/'
            }
        }
    });





</script>
{/block}